<template>
    <div class="room-manage-box">
        <div class="fields">
            <mt-field label="房间名" placeholder="请输入房间名" v-model="room.room_name"></mt-field>
            <mt-field label="房间密码" placeholder="请输入房间密码" type="password" v-model="password"></mt-field>
            <mt-field label="默认赔率" placeholder="请输入赔率" type="odds" v-model="room.odds"></mt-field>
            <mt-field label="金币比率" placeholder="请输入金币比率" type="gold_ratio" v-model="room.gold_ratio"></mt-field>
            <mt-field label="提现额度" placeholder="请输入用户提现的最小金币数量" type="gold_ratio" v-model="room.cash"></mt-field>

        </div>
        <div class="act">
            <mt-button class="btn" type="primary" @click="submit" :disabled="loading">
                <span v-if="!loading">修改</span>
                <mt-spinner type="triple-bounce" color="white" v-if="loading"></mt-spinner>
            </mt-button>
        </div>
    </div>
</template>

<script>
    import apiUrl from '@/api/apiUrl'
    import {Toast} from 'mint-ui'
    import { Validator } from 'vee-validate'

    export default {
        name: "index",
        data () {
            return {
                password: '',
                loading: false,
                errors: '',
                room: {}
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.setData()
            })
        },
        methods: {
            setData() {
                this.$http.get(apiUrl.room.roomInfo).then(res => {
                    if(res.data.code === 0)
                    {
                        this.$set(this, 'room', res.data.result)
                    } else {
                        Toast(res.data.msg)
                    }
                })
            },
            submit () {
                this.loading = true
                this.validator.validateAll({
                    room_name: this.room.room_name,
                    password: this.password,
                    odds: this.room.odds,
                    goldRatio: this.room.goldRatio
                }).then((result) => {
                    if (result) {
                        this.todo()
                    } else {
                        this.error()
                    }
                })
            },
            todo () {
                let params = new URLSearchParams()
                if (this.password) {
                    params.append('password', this.password)
                }
                if (this.room.room_name) {
                    params.append('room_name', this.room.room_name)
                }
                if (this.room.odds) {
                    params.append('odds', this.room.odds)
                }
                if (this.room.gold_ratio) {
                    params.append('gold_ratio', this.room.gold_ratio)
                }
                if (this.room.cash) {
                    params.append('cash', this.room.cash)
                }
                params.append('room_id', this.room.id)
                this.$http.post(apiUrl.room.edit, params).then(result => {
                    if (result.data.code !== 0) {
                        this.error(result.data.msg)
                    } else {
                        this.$set(this, 'loading', false)
                        Toast('房间修改成功');
                        // this.$router.push({name: 'admin-room-lists'})
                    }
                }).catch(err => {
                        console.log(err)
                })
            },
            error (msg = null) {
                let instance = Toast(msg ? msg : this.errors.all()[0])
                setTimeout(() => {
                    instance.close();
                    this.$set(this, 'loading', false)
                }, 1000);
            }
        },
        created() {
            const dict = {
                custom: {
                    room_name: {
                        required: '房间名不能为空',
                        min: '房间名至少由2个字符组成'
                    },
                    password: {
                        required: '密码不能为空',
                        min: '密码最少为6个字符',
                        max: '密码最多为18个字符',
                        confirmed: '两次密码不一致',
                    },
                    odds: {
                        required: '默认赔率不能为空',
                        numeric: '赔率只能为数字',
                    },
                    goldRatio: {
                        required: '金币比率不能为空',
                        numeric: '金币比率为数字',
                    }
                }
            }

            Validator.localize('custom', dict);
            this.validator = new Validator({
                room_name: 'min:2',
                password: 'min:6|max:18',
                odds: 'numeric',
                goldRatio: 'numeric',

            });
            this.$set(this, 'errors', this.validator.errors);
        }
    }
</script>

<style scoped lang="less">
    @import "../../../assets/css/bases";
    .act {
        margin-top: @big;
        display: flex;
        justify-content: center;
        align-items: center;
        .btn {
            width: 80%;
        }
    }
</style>